<template>
  <div class="content">
    <div class="posture">{{ formula }}</div>
    <div class="value">{{ num }}</div>
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  date () {
    return {}
  },

  computed: {
    ...mapState(['showNum', 'results', 'formula', 'isOperate', 'lastNum']),

    num () {
      const num = this.isOperate ? this.lastNum : this.showNum
      if (num === '' || num.includes('数')) return num
      if (num.indexOf('.') === -1) {
        return parseInt(num).toLocaleString()
      } else {
        const numArr = num.split('.')
        const num1 = parseInt(numArr[0]).toLocaleString() + '.' + numArr[1]
        // const num1 = this.showNum.toFixed(numArr[1].length)
        return num1
      }
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  padding-top: 30px;
  padding-right: 10px;
  height: 180px;
}

.posture, .value {
  height: 100px;
  text-align: right;
}

.posture {
  height: 50px;
  line-height: 50px;
  color: rgb(50, 50, 50);
  font-size: 16px;
}

.value {
  font-size: 60px;
  font-weight: 1000;
  font-style: '微软雅黑';
  line-height: 100px;
}
</style>
